<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Drive Video Masking</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1 class="fluid">Scroll Drive Video Masking</h1>
        <h2 class="fluid">credits: <a href="https://arjuncodess.vercel.app/">@arjuncodess</a></h2>
    </header>
    <main>
        <section>
            <div class="section__content">
                <svg viewBox="0 0 1025 437" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M779.402 65.498c-194-9-503 52-503 83s387-53 387-10-523 31-523 101c0 53 784-128 784-54 0 59-937.4 72.7-937.4 141.3 0 45.7 1011.4-124.3 1011.4-75.3s-1029 83-1029 140 1158.998-162.7 1077.998-83c-65.998 65-1099.998 90-1090.998 139 8.7 47.5 1090.998-121 1090.998-53s-1067.998 21-1067.998 110c0 57 919-27 1073.998-33"
                        stroke="#000" stroke-width="80" stroke-linecap="round" stroke-linejoin="round" pathLength="1" />
                </svg>
                <div class="section__text">
                    <p class="fluid">
                        <span>gotcha! You just got rickrolled!</span>
                        <span>now, back to scrolling!</span>
                        <span>hope you enjoyed the surprise!</span>
                    </p>
                </div>
                <svg viewBox="0 0 1025 370" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M-24 22.001c0 29 1075-54 1075-15s-1073 37-1073 76 1068-53 1068-14-1071 39-1071 77 1069-33 1069 5-890 23-890 63 718.5-9.9 716 30c-2 32-65 16-274 54"
                        stroke="#000" stroke-width="80" stroke-linecap="round" stroke-linejoin="round" pathLength="1" />
                </svg>
                <div class="section__buffer"></div>
            </div>
            <div class="section__stick">
                <video autoplay muted loop>
                    <source src="https://assets.codepen.io/605876/astley-short.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </section>
    </main>
    <footer>
        <h2 class="fluid">lol. you got rickrolled.</h2>
    </footer>
</body>

</html>